<template>
	<view>
		<page-head :title="'首页'" :bg="`transparent`" :headtype="1"></page-head>
		<image class="topbg" :src="apifun.serveimg+'hometopbg.png'" mode=""></image>
		<view class="topblock" :style="{'top':statusheadheight+'px'}">
			<view class="mymsg marginAuto flex">
				<view class="mymsghead">
					<!-- <image :src="apifun.serveimg+'mrhead.png'" mode=""></image> -->
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="mymsgmsg">
					<view class="mymsgwcome">欢迎来到</view>
					<view class="mymsgname">安阳中盈化肥产品销售报单系统</view>
				</view>
			</view>
			<view class="notice marginAuto">
				<uv-notice-bar @click="noticefun" :text="notice" direction="column" color="#666666" mode="link" bgColor='transparent'></uv-notice-bar>
			</view>
		</view>
		<view class="endtime">
			<view class="endtimeeach marginAuto" v-for="(item,index) in goodsdatas" :key="index">
				<view class="endtimetitle flex">
					<view>{{ item.name }}报单截止时间</view>
				</view>
				<view class="endtimemain flex">
					<!-- <view class="endtimeimg">
						<image :src="apifun.URLimg + item.image" mode=""></image>
					</view> -->
					<view class="endtimemsg">
						<view class="endtimemsg-djs flex">
							报价倒计时: <text  v-if="item.countdown <= 0">已结束</text>
							<uv-count-down
							v-if="item.countdown > 0"
							:time="item.countdown*1000" 
							format="DD HH:mm:ss"
							@change="djschange($event,index)"
							@finish="djsend(item)">
							<view class="flex" v-if="!!item.timeData">
								<view class="djseach">{{ item.timeData.days >=10 ? item.timeData.days:'0'+ item.timeData.days }}天</view>
								<view class="djseach">{{ item.timeData.hours >=10 ? item.timeData.hours:'0'+ item.timeData.hours }}</view>
								:<view class="djseach">{{ item.timeData.minutes >= 10 ? item.timeData.minutes : '0'+ item.timeData.minutes }}</view>
								:<view class="djseach">{{ item.timeData.seconds >= 10 ? item.timeData.seconds : '0'+ item.timeData.seconds }}</view>
							</view>
							</uv-count-down>
						</view>
						<view class="endtimemsg-time">截至时间：{{ timegs(item.end_time) }}</view>
					</view>
				</view>
			</view>
			<view class="endtimeeach marginAuto" v-for="(item,index) in goodsdatas" :key="index">
				<view class="endtimetitle flex">
					<view>{{ item.name }}</view>
					<view class="endtimebtn mainBg" @click="baodanfun(item)">+报单</view>
				</view>
				<view class="endtimemain flex">
					<!-- <view class="endtimeimg">
						<image :src="apifun.URLimg+item.image" mode=""></image>
					</view> -->
					<view class="endtimemsg" style="width:100%;">
						<view class="flex" style="width:100%;justify-content: space-between;">
							<view class="endtimemsg-title">最小报单量: <text style="font-weight:600;">{{ item.min }}</text></view>
							<view class="endtimemsg-title" style="text-align: right;">最大报单量: <text style="font-weight:600;">{{ item.max }}</text></view>
						</view>
						<view class="endtimemsg-convert flex">
							<view class="converteach" style="margin-right:20rpx;">{{ item.price }}元/吨</view>
							<!-- <view class="converteach">总收单量{{ item.total }}吨</view> -->
						</view>
						<view class="endtimemsg-intro">价格政策：{{ item.intro }}</view>
						<!-- <view class="endtimemsg-convert" v-if="item.sku.length > 0">
							<view class="converteach" v-for="(items,indexs) in item.sku">{{ items.min }}吨-{{ items.max }}吨以内{{ items.price }}元</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<uv-popup ref="noticepopup" mode="center" round="20">
			<view class="noticepup">
				<view class="closepup" @click="noticeclosefun">
					<uv-icon name="close" color="#333333" size="20"></uv-icon>
				</view>
				<view class="noticepuptitle">{{ activenotice.title }}</view>
				<view class="noticepupmsg marginAuto">
					<uv-parse :content="activenotice.content"></uv-parse>
				</view>
				<view class="boticebtn mainBg" @click="noticeclosefun">关闭</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight:uni.getStorageSync('ClientRectTop')+uni.getStorageSync('ClientRectHeight'),
				apifun:this.apifun,
				noticedata:[],
				notice:[],
				activenotice:{},
				goodsdatas:[]
			};
		},
		onLoad() {
			this.getnoticefun();
			this.goodslist()
		},
		methods: {
			baodanfun(item){
				uni.setStorageSync('baodanitem', JSON.stringify(item));
				setTimeout(()=>{
					this.apifun.navigate('/pages/user/homereport','id='+item.id)
				},500)
			},
			goodslist(){
				this.apifun.unirequest('/user/index/getGoodsList','post',{},(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						datas.forEach((item,index)=>{
							item.countdown = item.end_time - parseInt(new Date().getTime()/1000)
						});
						this.goodsdatas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getnoticefun(){
				this.apifun.unirequest('/user/index/getArticleList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.noticedata = datas;
						let notice =  [];
						datas.forEach((item,index)=>{
							notice.push(item.title)
						})
						this.notice = notice
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			noticefun(index){
				this.activenotice = this.noticedata[index];
				this.$refs.noticepopup.open()
			},
			noticeclosefun(){
				this.$refs.noticepopup.close()
			},
			djschange(e,index){
				this.$set(this.goodsdatas[index],'timeData',e) 
				// this.timeData = e;
			},
			djsend(item){
				this.$set(item,'countdown',0)
			},
			timegs(time){
				return uni.$uv.timeFormat(time,'yyyy年mm月dd日 hh:MM:ss')
			}
		},
		onPullDownRefresh() {
			this.getnoticefun();
			this.goodslist()
			uni.stopPullDownRefresh();
		},
	};
</script>

<style scoped lang="scss">
	page{
		background: #FAFAFA;
	}
	.topblock{
		position:sticky;
		z-index:50;
	}
	.topbg{
		position: fixed;
		z-index:20;
		top: 0;
		left: 0;
		width: 100%;
		height: 450rpx;
	}
	.mymsg{
		position:relative;
		width: 690rpx;
		padding-top:30rpx;
		.mymsghead{
			width: 120rpx;
			height: 120rpx;
			border-radius: 100rpx;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 100rpx;
			}
		}
		.mymsgmsg{
			line-height: 60rpx;
			margin-left: 20rpx;
			.mymsgwcome{
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
			}
			.mymsgname{
				font-size:28rpx;
				color: #666666;
			}
		}
	}
	.notice{
		position:relative;
		top: 0;
		width: 690rpx;
		height: 80rpx;
		margin-top:30rpx;
		border-radius: 10rpx;
		background-color:#F1F9FF;
	}
	// list
	.endtime{
		position: relative;
		z-index: 10;
		margin-top:90rpx;
		.endtimeeach{
			width: 630rpx;
			padding: 20rpx 30rpx;
			background:linear-gradient(to bottom, #F4FAFF,#ffffff);
			border-radius: 10rpx;
			margin-top: 20rpx;
			border:1px solid #EFF1F6;
			.endtimetitle{
				padding:0rpx 0 24rpx;
				line-height:50rpx;
				color:#333333;
				font-size: 30rpx;
				border-bottom: 1px dashed #CAE6FF;
				font-weight: 600;
				justify-content: space-between;
				.endtimebtn{
					width: 140rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #fff;
					border-radius: 10rpx;
					font-size:30rpx;
				}
			}
			
			.endtimemain{
				margin-top: 24rpx;
				.endtimeimg{
					width: 140rpx;
					margin-right: 20rpx;
					image{
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}
				.endtimemsg{
					.endtimemsg-title{
						margin-top: 20rpx;
						color:#333333;
						font-size: 30rpx;
					}
					.endtimemsg-convert{
						margin-top: 20rpx;
						.converteach{
							display: inline-block;
							margin-bottom:10rpx;
							margin-right: 10rpx;
							background:#F4F8FC;
							line-height: 52rpx;
							padding:0 10rpx;
							font-size:24rpx;
							color: #2340FF;
							margin-right: 20rpx;
						}
					}
					.endtimemsg-intro{
						font-size: 24rpx;
						color: #999999;
						line-height: 50rpx;
					}
					.endtimemsg-djs{
						margin-top: 20rpx;
						color:#E51818;
						font-size: 24rpx;
						.djseach{
							padding:0 8rpx;
							border-radius: 4rpx;
							background-color: #FFE9E9;
							margin: 0 10rpx;
						}
					}
					.endtimemsg-time{
						margin-top: 20rpx;
						color:#E51818;
						font-size: 24rpx;
					}
					
				}
			}
		}
	}
	.noticepup{
		position: relative;
		width: 600rpx;
		border-radius:30rpx;
		.closepup{
			position: absolute;
			right:40rpx;
			top: 40rpx;
		}
		.noticepuptitle{
			width: 600rpx;
			height: 160rpx;
			line-height: 140rpx;
			text-align: center;
			color:#333333;
			font-size: 34rpx;
			font-weight: 600;
			background:linear-gradient(to bottom, #B0D9FF,#ffffff);
		}
		.noticepupmsg{
			margin-top: -20rpx;
			width: 90%;
			height: 400rpx;
			line-height:40rpx;
			overflow-y: auto;
			font-size:30rpx;
		}
		.boticebtn{
			margin-top:30rpx;
			color: #fff;
			font-size:30rpx;
			width: 600rpx;
			height:100rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>